<template>
  <div>
    <basic-container>
      <div v-if="isBind">
        <el-result
          icon="success"
          title="已绑定"
          sub-title="如需解绑请点击重置">
          <template #extra>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </template>
        </el-result>
      </div>
      <div v-if="!isBind">
        <el-row justify="center" style="margin-bottom: 20px;">
          <el-text>二维码:</el-text>
        </el-row>
        <el-row justify="center" style="margin-bottom: 20px;">
          <vue-qr v-if="qrUrl !==''"
                  :text="qrUrl"
                  :margin="0"
                  :size="200"
                  :correctLevel="3"
                  colorDark="#000000"
                  colorLight="#fff" />
        </el-row>
        <el-row justify="center" style="margin-bottom: 20px;">
          <el-text>秘钥:</el-text>&emsp;{{ this.secret }}
        </el-row>
        <el-row justify="center" style="margin-bottom: 20px;">
          <el-text>验证码:</el-text>
          &emsp;
          <el-input v-model="code" style="width: 315px" placeholder="请输入验证码" minlength="6" maxlength="6" show-word-limit />
          <el-text v-show="!validate" type="danger" style="margin-left: 10px;">请输入6位数字</el-text>
        </el-row>
        <el-row justify="center">
          <el-button type="primary" @click="handleSubmit">绑定</el-button>
        </el-row>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { qrcode, bind, reset } from '@/api/system/google-auth';
import vueQr from 'vue-qr/src/packages/vue-qr.vue';

export default {
  components: {
    vueQr
  },
  data() {
    return {
      isBind: false,
      secret: '',
      qrUrl: '',
      code: '',
      validate: true
    };
  },
  created() {
    this.handleData();
  },
  methods: {
    handleSubmit() {
      this.validate = /^\d{6}$/.test(this.code);
      if (!this.validate) {
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: '请求中,请稍后...',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      bind({ secret: this.secret, code: this.code }).then(res => {
        this.$message({
          type: res.data.success ? 'success' : 'error',
          message: res.data.msg
        });
        this.isBind = res.data.success;
        loading.close();
      }).catch(() => {
        loading.close();
      });
      loading.close();
    },
    handleData() {
      qrcode().then(res => {
        let data = res.data.data;
        if (data.isBind) {
          this.isBind = true;
        } else {
          this.isBind = false;
          this.secret = data.secret;
          this.qrUrl = data.qrUrl;
        }
      });
    },
    handleReset() {
      this.$prompt('请输入验证码', '重置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d{6}$/,
        inputErrorMessage: '请输入6位数字'
      }).then(({ value }) => {
        const loading = this.$loading({
          lock: true,
          text: '请求中,请稍后...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        reset(value).then(res => {
          this.$message({
            type: res.data.success ? 'success' : 'error',
            message: res.data.msg
          });
          loading.close();
          if (res.data.success) {
            this.handleData();
          }
        }).catch(() => {
          loading.close();
        });
      });
    }
  }
};
</script>

<style>

</style>
